import Icon, {
    ApiFilled,
    BorderlessTableOutlined,
    ContactsOutlined,
    FieldNumberOutlined,
    FieldTimeOutlined,
    KeyOutlined,
    ManOutlined, MessageOutlined,
    QuestionOutlined, RobotOutlined,
    WomanOutlined,
} from '@ant-design/icons';
import { GridContent } from '@ant-design/pro-components';
import { useModel, useRequest } from '@umijs/max';
import { Avatar, Card, Col, Divider, GetProps, message, Row, Tag } from 'antd';
import React, { useState } from 'react';
import useStyles from './Center.style';
import NotOwnInterface from './components/NotOwnInterface';
import OwnInterface from './components/OwnInterface';
import { getUserByIdUsingGet } from '@/services/api-share-backhend/userController';
import {
  getUserInterfaceInfoByUserIdUsingGet,
  listInterfaceInfoNotOwnByPageUsingGet,
} from '@/services/api-share-backhend/userInterfaceInfoController';
import { listInterfaceInfoByUserIdUsingGet } from '@/services/api-share-backhend/interfaceInfoController';
import UserProvidedInterfaceList from '@/pages/account/center/components/UserProvidedInterfaceList';
import ApplySchedule from '@/pages/account/center/components/ApplySchedule';
import { listApplyInterfaceInfoByPageUsingGet } from '@/services/api-share-backhend/applyInterfaceInfoController';

type tabKeyType = 'articles' | 'notOwnInterface' | 'providedInterface';

const Center: React.FC = () => {
  const { styles } = useStyles();
  const [tabKey, setTabKey] = useState<tabKeyType>('ownInterface');
  const [tabNum, setTabNum] = useState();
  const { initialState } = useModel('@@initialState');

  type CustomIconComponentProps = GetProps<typeof Icon>;

  const HeartSvg = () => (
    <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
      <path
        d="M246.72646 259.328c0-105.76 87.488-193.312 193.248-193.312 105.76 0 193.312 87.552 193.312 193.312s-87.552 193.28-193.312 193.28c-105.792 0-193.248-87.52-193.248-193.28zM123.33446 947.232a57.216 57.216 0 0 1-57.984-58.016c0-193.28 149.536-353.056 338.784-371.232h39.84c43.712-3.424 105.664-14.784 138.112-43.776l14.816-10.816c61.984-51.136 98.304-123.904 98.304-204.064C695.20646 117.216 578.59746 0.64 433.15746 0.64c-134.752 0-251.264 116.576-251.264 258.688 0 80.16 36.352 152.928 98.336 204.064l18.176 10.816-18.144 7.392C112.51746 546.976 0.00646 707.264 0.00646 889.216a122.752 122.752 0 0 0 123.904 123.904H455.30246c10.816 0 28.992-10.784 28.992-32.96 0-25.568-18.176-32.928-28.992-32.928H123.33446zM964.10246 801.728c-54.56 7.36-94.944 51.04-94.944 109.056 0 10.816 3.424 25.6 7.392 33.024l-47.2 25.568-18.144-18.176c-21.664-14.816-39.808-21.568-61.984-21.568-18.272 0-39.808 7.328-61.984 21.568-7.392 7.328-14.784 10.816-18.24 18.176l-43.712-25.568c3.392-7.424 7.36-21.632 7.36-33.024A109.696 109.696 0 0 0 537.70246 801.728c0-7.424-3.456-21.632-3.456-36.448 0-10.816 3.456-25.6 3.456-36.384 54.496-7.424 94.944-51.2 94.944-109.152 0-10.848-3.392-25.568-7.36-32.928l47.2-25.632c3.392 3.424 10.72 10.816 18.176 14.816 21.536 14.752 39.808 21.568 58.016 21.568 18.144 0 36.352-7.36 57.92-21.568 7.456-7.36 14.784-10.816 18.272-14.816l47.168 25.632c-3.392 7.36-7.456 21.6-7.456 32.928a109.824 109.824 0 0 0 95.04 109.152c0 7.36 3.392 21.6 3.392 36.384 5.152 10.784 1.088 25.568 1.088 36.448z m51.232-91.008c-3.488-18.24-18.272-32.992-32.992-32.992h-3.456c-32.896 0-57.92-25.6-57.92-57.984 0-7.392 3.392-18.24 3.392-21.6 7.328-18.176 0-39.84-14.816-51.168l-65.345-36.384h-18.24c-10.72 0-25.536 3.392-32.928 14.752-7.392 7.424-29.024 25.6-43.744 25.6-14.816 0-36.448-18.176-47.264-25.6-7.328-7.36-18.176-14.752-32.96-14.752-7.328 0-10.752 0-14.784 3.392l-69.312 36.384c-14.816 10.816-21.664 32.96-14.816 51.136 0 0 3.392 10.848 3.392 21.632a57.12 57.12 0 0 1-57.92 58.016h-3.488c-14.784 0-28.992 14.816-32.96 32.96 0 3.424-7.36 28.992-7.36 54.624 0 21.632 3.392 51.168 7.36 54.464 3.456 18.272 18.144 33.056 32.96 33.056h3.488c32.96 0 57.92 25.6 57.92 58.016 0 7.328-3.392 18.144-3.392 21.504-7.328 18.272 0 39.744 14.816 51.168l65.312 36.48c7.456-3.424 10.88-3.424 18.208-3.424 10.816 0 25.6-3.392 33.056-14.848 7.328-7.36 28.96-28.864 47.168-28.864 14.784 0 39.712 18.144 47.168 28.864 7.36 7.424 18.208 14.848 32.992 14.848 7.328 0 10.784 0 18.144-3.392l65.344-36.416c14.784-10.784 21.664-32.928 14.784-51.232 0 0-3.36-10.72-3.36-21.536 0-32.992 25.6-58.016 58.016-58.016h3.392c14.752 0 28.992-14.816 32.928-32.96 0 0 7.36-28.96 7.36-54.624-6.784-18.176-10.144-47.168-10.144-51.104zM749.28646 812.48c-25.6 0-47.264-21.632-47.264-47.2 0-25.6 21.664-47.2 47.264-47.2 25.536 0 47.168 21.6 47.168 47.2 0.512 25.568-21.664 47.2-47.168 47.2z m18.144-145.536C698.05446 652.128 636.10246 714.112 650.85446 786.88c7.424 39.776 39.84 72.736 80.128 80.096 69.44 14.88 131.392-47.104 116.608-116.48-6.816-43.2-39.808-76.192-80.16-83.552z"
        p-id="2663"
      ></path>
    </svg>
  );
  const DevIcon = (props: Partial<CustomIconComponentProps>) => (
    <Icon component={HeartSvg} {...props} />
  );

  //  获取用户信息
  const { data: currentUser, loading } = useRequest(async () => {
    const userMesRes = await getUserByIdUsingGet({ id: initialState.loginUser.id });
    if (userMesRes.data === null) {
      message.error('用户信息为空');
      return null;
    } else {
      //   ProTable的缺陷在这里，每个组件里面还得重新写一遍，传不了
      const ownInterfaceRes = await getUserInterfaceInfoByUserIdUsingGet();
      // 没有开通
      const notOwnInterfaceRes = await listInterfaceInfoNotOwnByPageUsingGet();
      // 自己开发
      const providedInterfaceInfoRes = await listInterfaceInfoByUserIdUsingGet();

      // 申请进度信息
      const applySchedule = await listApplyInterfaceInfoByPageUsingGet({
        userId: initialState.loginUser.id,
      });

      let showOwnInterfaceRes = {};
      let showNotOwnInterfaceRes = {};
      let showApplyRes = {};
      let showPrividedRes = {};

      if (ownInterfaceRes.data != null) {
        // setOwnInterfaceNum(userInterfaceRes.data.length);
        showOwnInterfaceRes = { ownTotalInterfaceNum: ownInterfaceRes.data.length };
      } else {
        // setOwnInterfaceNum(0);
        showOwnInterfaceRes = { ownTotalInterfaceNum: 0 };
      }

      // 得到没有开通的数量
      if (notOwnInterfaceRes.data !== null) {
        showNotOwnInterfaceRes = { notOwnInterfaceRes: notOwnInterfaceRes.data.total };
      } else {
        showNotOwnInterfaceRes = { notOwnInterfaceRes: 0 };
      }

      // 自己开发的接口
      if (providedInterfaceInfoRes.data !== null) {
        showPrividedRes = { providedTotalInterfaceNum: providedInterfaceInfoRes.data.total };
      } else {
        showPrividedRes = { providedTotalInterfaceNum: 0 };
      }

      // 申请个数
      if (providedInterfaceInfoRes.data !== null) {
        showApplyRes = { applyToTalInterfaceNum: applySchedule.data.total };
      } else {
        showApplyRes = { applyToTalInterfaceNum: 0 };
      }

      //   三个res拼一个，得到用户信息栏的信息
      const res = {
        ...userMesRes.data,
        ...showOwnInterfaceRes,
        ...showNotOwnInterfaceRes,
        ...showApplyRes,
      };
      setTabNum({
        ...showOwnInterfaceRes,
        ...showNotOwnInterfaceRes,
        ...showPrividedRes,
        ...showApplyRes,
      });
      return { data: res };
    }
  });

  const operationTabList = [
    {
      key: 'ownInterface',
      tab: (
        <span>
          已开通接口{' '}
          <span
            style={{
              fontSize: 14,
            }}
          >
            ({tabNum?.ownTotalInterfaceNum})
          </span>
        </span>
      ),
    },
    {
      key: 'notOwnInterface',
      tab: (
        <span>
          未开通接口{' '}
          <span
            style={{
              fontSize: 14,
            }}
          >
            ({tabNum?.notOwnInterfaceRes})
          </span>
        </span>
      ),
    },
    {
      key: 'providedInterface',
      tab: (
        <span>
          本人开发的接口{' '}
          <span
            style={{
              fontSize: 14,
            }}
          >
            ({tabNum?.providedTotalInterfaceNum})
          </span>
        </span>
      ),
    },
    {
      key: 'applySchedule',
      tab: (
        <span>
          申请接口进度{' '}
          <span
            style={{
              fontSize: 14,
            }}
          >
            ({tabNum?.applyToTalInterfaceNum})
          </span>
        </span>
      ),
    },
  ];

  //  渲染用户信息
  const renderUserInfo = ({
    id,
    providedTotalInterfaceNum,
    gender,
    createTime,
    userRole,
    accessKey,
    secrectKey,
    email
  }) => {
    return (
      <div className={styles.detail}>
        <p>
          <ContactsOutlined
            style={{
              marginRight: 8,
            }}
          />
          {userRole == 'admin' ? '管理员' : '普通用户'}
        </p>
        {gender == null ? (
          <p>
            <QuestionOutlined
              style={{
                marginRight: 8,
              }}
            />
            性别未知
          </p>
        ) : gender == '1' ? (
          <p>
            <ManOutlined
              style={{
                marginRight: 8,
              }}
            />{' '}
            男
          </p>
        ) : (
          <p>
            <WomanOutlined
              style={{
                marginRight: 8,
              }}
            />
            女
          </p>
        )}

        <p>
          <BorderlessTableOutlined
            style={{
              marginRight: 8,
            }}
          />
          编号: {id}
        </p>
         <p>
          <MessageOutlined
            style={{
              marginRight: 8,
            }}
          />
          邮箱: {email===null||email===""?"暂未设置":email}
        </p>


        <p>
          <RobotOutlined
              style={{
                marginRight: 8,
              }}
          />
          AK: {accessKey}
        </p>
        <p>
          <KeyOutlined
              style={{
                marginRight: 8,
              }}
          />
          SK: {secrectKey}
        </p>


        <p>
          <FieldTimeOutlined
            style={{
              marginRight: 8,
            }}
          />
          注册时间: {new Date(createTime).toLocaleString()}
        </p>

        <p>
          <FieldNumberOutlined
            style={{
              marginRight: 8,
            }}
          />
          已开通接口数：{tabNum.ownTotalInterfaceNum}
        </p>

        {providedTotalInterfaceNum === 0 ? (
          <p>
            <DevIcon
              style={{
                marginRight: 8,
              }}
            />{' '}
            非开发者
          </p>
        ) : (
          <p>
            <ApiFilled
              style={{
                marginRight: 8,
              }}
            />
            开发接口数量：{tabNum.providedTotalInterfaceNum}
          </p>
        )}
      </div>
    );
  };

  // 渲染tab切换
  const renderChildrenByTabKey = (tabValue: tabKeyType) => {
    if (tabValue === 'providedInterface') {
      return <UserProvidedInterfaceList />;
    }
    if (tabValue === 'notOwnInterface') {
      return <NotOwnInterface />;
    }
    if (tabValue === 'ownInterface') {
      return <OwnInterface />;
    }
    if (tabValue === 'applySchedule') {
      return <ApplySchedule />;
    }
    return null;
  };

  const TagList: React.FC = () => {
    return (
      <div className={styles.tags}>
        <div className={styles.tagsTitle}>标签</div>
        {currentUser.userRole === 'user' ? (
          <Tag key="0">普通用户</Tag>
        ) : (
          <Tag key="1" color={'#FAB67D'}>
            管理员
          </Tag>
        )}

        {tabNum.providedInterfaceNum === 0 ? (
          null
        ) : (
          <Tag key="2" color={'green'}>
            开发者
          </Tag>
        )}
      </div>
    );
  };
  return (
    <GridContent style={{ marginLeft: 100, marginRight: 100 }}>
      <Row gutter={24}>
        <Col lg={6} md={24} style={{ marginTop: 80}}>
          <Card
            bordered={false}
            style={{
              marginBottom: 24,
            }}
            loading={loading}
          >
            {!loading && currentUser && (
              <div>
                <div className={styles.avatarHolder}>
                  <Avatar key={"avatar"} alt="" src={currentUser.userAvatar} size={80} />
                  <div className={styles.name}>{currentUser.userName}</div>
                </div>
                {renderUserInfo(currentUser)}
                <Divider dashed />
                <TagList />
                <Divider
                  style={{
                    marginTop: 16,
                  }}
                  dashed
                />
              </div>
            )}
          </Card>
        </Col>
        <Col lg={17} md={24}>
          <Card
            className={styles.tabsCard}
            bordered={false}
            tabList={operationTabList}
            activeTabKey={tabKey}
            onTabChange={(_tabKey: string) => {
              setTabKey(_tabKey as tabKeyType);
            }}
          >
            {renderChildrenByTabKey(tabKey)}
          </Card>
        </Col>
      </Row>
    </GridContent>
  );
};
export default Center;
